<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="后台管理系统">
    <meta name="description" content="">
    <link rel="shortcut icon" href="static/img/favicon.ico">

    <link rel="stylesheet" href="/plugins/layui_v2/css/layui.css">
    <link rel="stylesheet" href="/css/global.css">

    <link rel="stylesheet" type="text/css" href="/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/personal.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9h680jcse4620529.css">

    <script src="/plugins/layui_v2/layui.js"></script>

<body>
<div class="larry-grid layui-anim layui-anim-upbit larryTheme-A" >
    <div class="larry-personal" >
        <div class="layui-tab" >
            <blockquote class="layui-elem-quote mylog-info-tit">
                <div class="layui-inline">
                    <form class="layui-form" id="resSearchForm">

                        <div class="layui-input-inline" style="width:110px;">
                            <select name="searchTerm" >
                                <option value="name">菜单名称</option>
                                <option value="type">菜单类型</option>
                                <option value="menu_level">菜单级别</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:145px;">
                            <input type="text" name="searchContent" value="" placeholder="请输入关键字" class="layui-input search_input">
                        </div>
                        <a class="layui-btn menuSearchList_btn" lay-submit lay-filter="menuSearchFilter"><i class="layui-icon larry-icon larry-chaxun7"></i>查询</a>
                    </form>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal btn_add"> <i class="layui-icon larry-icon larry-xinzeng1"></i>新增菜单</a>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn btn_update"> <i class="layui-icon larry-icon larry-bianji4"></i>编辑菜单</a>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger btn_delete"> <i class="layui-icon larry-icon larry-huishouzhan1"></i>删除菜单</a>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal excelResExport_btn"  style="background-color:#5FB878"> <i class="layui-icon larry-icon larry-danye"></i>导出</a>
                </div>
            </blockquote>
            <!--<table id="menuTableList" lay-filter="menuTableId"></table>-->
            <div id="menu_table" style="padding-top:10px;"></div>

        </div>
    </div>
</div>

<script id="menuTableTpl" type="text/html">
    <table class="layui-table">
        <col width="230px" />
        <col width="80px" />
        <col width="160px" />
        <col width="120px" />
        <col width="60px" />
        <col width="50px" />
        <col width="100px" />
        <col width="50px" />
        <col width="200px" />
        <thead>
        <tr>
            <th>菜单名称</th>
            <th>菜单ID</th>
            <th>上级菜单</th>
            <th>图标</th>
            <th>类型</th>
            <th>排序</th>
            <th>菜单URL</th>
            <th>状态</th>
            <th>授权标识</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.rows,function(index,r){ }}
        <tr>
            <td class="layui-form layui-form-item">
                <span><input type="radio" lay-skin="primary" /></span>{{r.name}}
            </td>
            <td align="center">{{r.id}}</td>
            <td align="center">{{r.parentName || ''}}</td>
            <td align="center"><span class="layui-icon larry-icon {{r.icon || ''}}"></span></td>
            <td>
                {{#  if(r.type == 0){ }}
                <span class="layui-btn layui-btn-xs layui-bg-blue">目录</span>
                {{#  } }}
                {{#  if(r.type == 1){ }}
                <span class="layui-btn layui-btn-xs layui-bg-green">菜单</span>
                {{#  } }}
                {{#  if(r.type == 2){ }}
                <span class="layui-btn layui-btn-xs layui-bg-orange">按钮</span>
                {{#  } }}
            </td>
            <td align="center">{{r.sort || ''}}</td>
            <td>{{r.url || ''}}</td>
            <td align="center">
                {{#  if(r.status == 0){ }}
                <span class="label label-danger ">无效</span>
                {{#  } }}
                {{#  if(r.status == 1){ }}
                <span class="label label-success">有效</span>
                {{#  } }}
            </td>
            <td>{{r.perms || ''}}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>

<script type="text/javascript" th:inline="javascript">
    layui.config({
        base : "/js/"
    }).use(['form', 'table', 'layer','common'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            common = layui.common;

        /**查询*/
        $(".menuSearchList_btn").click(function(){
            var loading = layer.load(0,{ shade: [0.3,'#000']});
            //监听提交
            form.on('submit(menuSearchFilter)', function (data) {
                table.reload('menuTableId',{
                    where: {
                        key:data.field.searchTerm,
                        value:data.field.searchContent
                    },
                    height:'full-140',
                    page: true,
                    done: function (res, curr, count) {
                        common.resizeGrid();
                        layer.close(loading);
                    }
                });
            });
        });
    });

</script>

<script type="text/javascript">
    var tree1;
    var treegrid;

    //查询
    function search() {
        layui.config({ base: '/plugins/layGrid/' }).use(['element', 'laytpl', 'grid'], function () {
            var laytpl = layui.laytpl;
                treegrid = layui.grid;
                treegrid.config.render = function (viewid, data) {
                var view = document.getElementById(viewid).innerHTML;
                return laytpl(view).render(data) || '';
            };

            var search_rolename = $("#rolename").val();

            var options = {
                elem: 'data_table',
                view: 'itemTableTpl',
                url: '',
                searchData: { "rolename": search_rolename, page: 1, pageSize: 4 },
                rowid: 'roleid',
                page: 1,
                pageSize: 4,
                record: true,
                singleSelect: true,
                pagerID: 'data_pager'
            };

            tree1 = treegrid.createNew(options);
            tree1.build();

        });

    }
</script>
<script type="text/javascript" th:inline="javascript">
    var tree1;

    layui.config({ base: '/plugins/layGrid/' }).use(['element','laytpl', 'treegrid', 'layer', 'common'], function () {

        var $ = layui.$,
            laytpl = layui.laytpl,
            common = layui.common;
            treegrid = layui.treegrid;
            treegrid.config.render = function (viewid, data) {
            var view = document.getElementById(viewid).innerHTML;
            return laytpl(view).render(data) || '';
        };

        tree1=treegrid.createNew({
            elem: 'menu_table',
            view: 'menuTableTpl',
            url: '/sys/menu/listAjax',
            order: 'sort',
            id:'id',
            parentid: 'parentId',
            singleSelect: true,
            onCollapse: false
        });
        tree1.build();


        /*新增菜单*/
        $(".btn_add").click(function(){
            var url = "/sys/menu/add";
            common.cmsLayOpen('新增菜单',url,'750px','500px');
        });

        /*编辑菜单*/
        $('.btn_update').on('click', function () {
            var row = tree1.selectRow();
            if (row != null) {
                var id = row.id;
                var url =  "/sys/menu/edit/"+id;
                common.cmsLayOpen('编辑菜单',url,'750px','500px');
            } else {
                common.cmsLayErrorMsg('请选择菜单再编辑!');
            }
            //tree1.update(row);
        });

        /*删除菜单*/
        $('.btn_delete').on('click', function () {
            var row = tree1.selectRow();
            console.log(row);
            console.log(row.children.length);
            if (row != null && row.children.length == 0) {
                var id = row.id;
                var url =  "/sys/menu/delete/"+id;
                common.ajaxPathCmsConfirm('删除菜单','确定删除菜单吗?',url);
            } else {
                common.cmsLayErrorMsg('请选择菜单再删除!');
            }
            //tree1.update(row);
        });


    });
</script>

</body>
</html>